<template>
	<view class="user-container" v-show="show">
		<view class="head-title" v-show="!isUserInfoSet">员工信息维护</view>
		<u-form  v-if="!isUserInfoSet" :model="form" labelPosition="left" label-width="110" label-align="left" :rules="rules" ref="uForm1"
			class="form-container">
			<u-form-item label="姓名" prop="name" required borderBottom>
				<u-input fontSize="14px"  v-model="form.name" border="none" placeholder="请输入姓名"></u-input>
			</u-form-item>
			<u-form-item label="手机号" prop="phone" required borderBottom>
				<u-input fontSize="14px"  type="number" v-model="form.phone" border="none" maxlength="11" placeholder="请输入手机号"></u-input>
			</u-form-item>
			
			<u-button  class="submit-btn" color="#920076" @click="submit">提交</u-button>
			
		</u-form>
		
		<view class="user-info" v-else>
			<u--image src="/static/4444.png" width="460rpx" height="414rpx"></u--image>
			员工信息已维护
		</view>
		

	</view>
</template>

<script>
	import {
		getOpenid
	} from "@/common/permission.js"
	export default {
		data() {
			return {
				show: false,
				isUserInfoSet: false,
				form: {
					openid: '',
					name: '',
					phone: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '请输入正确的手机号',
							// 触发器可以同时用blur和change
							trigger: ['blur', 'change'],
						}
					],
				}
			}
		},
		async onLoad() {
			await getOpenid()
			const openid = uni.getStorageSync("openid")
			this.form.openid = openid
			// TODO 根据openid 查询员工信息
			this.$request({
				url: '/appoint/getUserRole?openid=' + this.form.openid
			}).then(res => {
				if(res.data && res.data.openid){
					this.isUserInfoSet = true
				}else{
					this.isUserInfoSet = false
				}
			}).catch(this.isUserInfoSet = false)
			.finally(setTimeout(()=> this.show = true,100)
			)
			
		},
		methods: {
			submit(){
				this.$refs.uForm1.validate().then(res => {
					this.$request({
						method: "POST",
						header: {
							"Content-Type": "application/json"
						},
						data: {
							...this.form
						},
						url: '/appoint/updUserOpenid'
					}).then(res => {
						this.isUserInfoSet = true
					}).catch( e => {
						console.log(e)
						uni.showModal({
							title: '温馨提示',
							content: e.msg,
							showCancel: false,
						})
						// uni.showToast({
						// 	title:'维护失败',
						// 	icon: 'error'
						// })
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.input-placeholder{
		font-size: 12px;
	}
	.user-container{
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #920076;
		.head-title{
			color: #fff;
			font-size: 40rpx;
			margin-bottom: 80rpx;
			margin-top: 300rpx;
		}
	}
	.form-container {
		z-index: 999;
		background: #fff;
		border-radius: 10rpx;
		z-index: 99;
		padding: 30rpx;
		width: 80%;
		
		.submit-btn{
			margin-top:100rpx;
		}
	}
	
	.user-info{
		margin-top:300rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		gap:60rpx;
	}
</style>